3-1 關於箭頭this指向

一般陣列讀取寫法

const arr = [1,2,3,4,5 ];
const filterArr = arr.filter(function(item){
    return item % 2;
})
console.log(filterArr);

箭頭函式縮寫

//1.function字樣移除，寫箭頭 2.大括號、return及";"移除 3.item旁括號也可移除
const filterArr = arr.filter(item => item % 2);

無箭頭函式，判斷this指向

var name = '全域'
const person = {
   name: '小明',
   callName: function () { 
     console.log('1', this.name); // 1 小明
        setTimeout(function () {//callback所以指向全域
           console.log('2', this.name); // 2指向全域
           console.log('3', this); // 3指向window
         }, 10);
   },
 }
 person.callName();//是指向person

有箭頭函式，判斷this指向

//採箭頭函式沒有自己this，需往外層作用域查看，為函式時指向this，非函式指向全域
var name = '全域'
const person = {
   name: '小明',
   callName: function () { 
     console.log('1', this.name); // 1 小明
     setTimeout(() =>{//callback所以指向全域
       console.log('2', this.name); // 2小明
       console.log('3', this); // 3指向person物件
     }, 10);
   },
 }
person.callName();//是指向person

解決不可預期下this指向全域時，

var someone = '全域';
function callSomeone() {
  console.log(this.someone);
}

var obj4 = {
  someone: '物件 4',
  fn() {
    setTimeout(function () {//callback指向全域
      console.log(this.someone);
    });
  }
}

obj4.fn();

解決方法1.const vm = this;

var obj4 = {
  someone: '物件 4',
  fn() {
    const vm = this;
    setTimeout(function () {//callback指向全域
      console.log(vm.someone);
    });
  }
}

obj4.fn();

解決方法2.將setTimeout改成箭頭函式

var obj4 = {
   someone: '物件 4',
   fn() {
     setTimeout(()=>{//callback function
      console.log(this.someone);
     });
   }
 }
obj4.fn();

知識點來源:六角課程、008天絕對看不完的vue3.js、網路文章

以上是今天所提供知識點如有誤，再請務必在下面留言~